<template>
  <div class="dispatch-command">
    <div class="left-section">
      <!-- 预演方案 -->
      <ContainerPanel1 title="预演方案" class="rehearsal-section">
        <div class="search-box">
          <input type="text" placeholder="搜索预演方案..." v-model="searchQuery">
          <span class="search-icon">🔍</span>
        </div>
        <div class="table-container">
          <dv-scroll-board :config="rehearsalConfig" />
        </div>
      </ContainerPanel1>

      <!-- 通讯录 -->
      <ContainerPanel1 title="通讯录" class="contact-section">
        <div class="contact-list">
          <div v-for="(category, index) in contactCategories" :key="index" class="contact-category">
            <div class="category-header" @click="toggleCategory(index)">
              <span class="category-title">{{ category.title }}</span>
              <span class="toggle-icon" :class="{ 'expanded': category.isExpanded }">▼</span>
            </div>
            <div class="category-content" v-show="category.isExpanded">
              <div v-for="(subItem, subIndex) in category.items" :key="subIndex" class="sub-category">
                <div class="sub-header" @click="toggleSubCategory(category, subIndex)">
                  <span class="sub-title">{{ subItem.title }}</span>
                  <span class="toggle-icon" :class="{ 'expanded': subItem.isExpanded }">▼</span>
                </div>
                <div class="sub-content" v-show="subItem.isExpanded">
                  <div v-for="(contact, contactIndex) in subItem.contacts" :key="contactIndex" class="contact-item">
                    <div class="contact-name">{{ contact.name }}</div>
                    <div class="contact-phone">{{ contact.phone }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ContainerPanel1>
    </div>
    <div class="map-section">
      <Map class="map-container" />
    </div>
    <div class="info-section">
      <!-- 紧急事件 -->
      <div class="info-card emergency">
        <div class="card-title">紧急事件</div>
        <dv-border-box-13>
          <div class="card-content">
            <!-- 事件统计 -->
            <div class="emergency-stats">
              <div class="stat-item">
                <div class="stat-icon">
                  <svg t="1746439843777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6402" width="32" height="32">
                    <path d="M991.14097778 782.83358815l-407.77955556-704.8518163c-32.27041185-55.82696297-112.86755555-55.7056-144.99233185 0.13349926l-406.56592592 705.60426667c-32.17332148 55.82696297 8.16772741 125.56212148 72.61146073 125.50144l814.34548149-0.75245037c64.43159703-0.04854518 104.65128297-69.85652148 72.38087111-125.63493926zM509.75478518 811.76651852a58.6425837 58.6425837 0 1 1 58.75181037-58.6425837A58.67899259 58.67899259 0 0 1 509.75478518 811.76651852z m44.50379852-244.48568889s-17.51267555 60.85138963-43.98193778 60.85138962h-0.10922667c-26.15371852 0-43.98193778-60.9606163-43.98193777-60.96061628-28.69020445-83.74044445-39.86773333-228.87841185-39.86773333-268.52769186 0-51.26371555 21.62688-93.34025482 68.55793777-100.93757629a57.11341037 57.11341037 0 0 1 15.29173333-2.3180326A55.82696297 55.82696297 0 0 1 525.47128889 197.66992592c46.93105778 7.59732148 68.55793778 49.67386075 68.55793778 100.9375763 0 39.70996148-11.18966518 184.94501925-39.77064297 268.6854637z" fill="#d81e06" p-id="6403"></path>
                  </svg>
                </div>
                <div class="stat-text">
                  <span>紧急事件数：</span>
                  <span class="stat-value">{{ emergencyEvents?.length || 0 }}</span>
                </div>
              </div>
            </div>
            
            <!-- 事件详情 -->
            <div class="emergency-detail">
              <div class="detail-container">
                <div class="event-detail-box">
                  <div class="detail-content">
                    <div class="detail-item">
                      <div class="detail-label">事件来源：</div>
                      <div class="detail-value">{{ currentEvent?.source || '-' }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">发生时间：</div>
                      <div class="detail-value">{{ currentEvent?.time || '-' }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">发生地点：</div>
                      <div class="detail-value">{{ currentEvent?.location || '-' }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="detail-label">事件描述：</div>
                      <div class="detail-value description">{{ currentEvent?.description || '-' }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="event-navigation">
                <div class="nav-arrow up" @click="navigateEvent('prev')" :class="{ 'disabled': currentEventIndex === 0 }">
                  ▲
                </div>
                <div class="nav-arrow down" @click="navigateEvent('next')" :class="{ 'disabled': currentEventIndex === (emergencyEvents?.length || 0) - 1 }">
                  ▼
                </div>
              </div>
            </div>
          </div>
        </dv-border-box-13>
      </div>
      
      <!-- 抢险队伍 -->
      <div class="info-card rescue">
        <div class="card-title">抢险队伍</div>
        <dv-border-box-13>
          <div class="card-content">
            <table class="rescue-table">
              <thead>
                <tr>
                  <th>抢险队伍</th>
                  <th>所属单位</th>
                  <th>状态</th>
                  <th>联系人</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(team, index) in rescueTeams" :key="index">
                  <td>{{ team.name }}</td>
                  <td>{{ team.department }}</td>
                  <td>
                    <span class="status-badge" :class="team.status">{{ team.status }}</span>
                  </td>
                  <td>{{ team.contact }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </dv-border-box-13>
      </div>
      
      <!-- 应急物资 -->
      <div class="info-card supplies">
        <div class="card-title">应急物资</div>
        <dv-border-box-13>
          <div class="card-content">
            <table class="supplies-table">
              <thead>
                <tr>
                  <th>物资名称</th>
                  <th>所属单位</th>
                  <th>联系人</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(supply, index) in emergencySupplies" :key="index">
                  <td>{{ supply.name }}</td>
                  <td>{{ supply.department }}</td>
                  <td>{{ supply.contact }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </dv-border-box-13>
      </div>
    </div>

    <EventDetailDialog
      v-model="showDialog"
      :event="selectedEvent"
      @update-status="updateEventStatus"
    />

    <!-- 预案管理对话框 -->
    <PlanManageDialog
      v-model="showPlanDialog"
      :plans="rehearsalPlans"
      @update:plans="rehearsalPlans = $event"
    />

    <!-- 事件处理对话框 -->
    <EventManageDialog
      v-model="showEventDialog"
      :events="emergencyEvents"
      @update:events="emergencyEvents = $event"
    />

    <!-- 物资调度对话框 -->
    <SupplyDispatchDialog
      v-model="showSupplyDialog"
      :supplies="emergencySupplies"
      @update:supplies="emergencySupplies = $event"
    />

    <!-- 队伍调度对话框 -->
    <TeamDispatchDialog
      v-model="showTeamDialog"
      :teams="rescueTeams"
      @update:teams="rescueTeams = $event"
    />

    <!-- 底部按钮组 -->
    <div class="bottom-buttons">
      <div class="button-group">
        <div class="button" @click="onPlanManage">
          <i class="el-icon-document"></i>
          <span>预案管理</span>
        </div>
        <div class="button" @click="onEventHandle">
          <i class="el-icon-warning"></i>
          <span>事件处理</span>
        </div>
        <div class="button" @click="onSupplyDispatch">
          <i class="el-icon-box"></i>
          <span>物资调度</span>
        </div>
        <div class="button" @click="onTeamDispatch">
          <i class="el-icon-user"></i>
          <span>队伍调度</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Map from '@/components/Map.vue'
import EventDetailDialog from '@/components/EventDetailDialog.vue'
import ContainerPanel1 from '@/components/ContainerPanel1.vue'
import PlanManageDialog from '@/components/PlanManageDialog.vue'
import EventManageDialog from '@/components/EventManageDialog.vue'
import SupplyDispatchDialog from '@/components/SupplyDispatchDialog.vue'
import TeamDispatchDialog from '@/components/TeamDispatchDialog.vue'

const showDialog = ref(false)
const selectedEvent = ref({})
const searchQuery = ref('')
const currentEventIndex = ref(0)

// 预演方案数据
const rehearsalPlans = ref([
  { name: '巡检方案A', startTime: '2024-03-21 08:00', endTime: '2024-03-21 17:00', info: '全流域常规巡检' },
  { name: '应急演练B', startTime: '2024-03-22 09:30', endTime: '2024-03-22 15:30', info: '洪水应急演练' },
  { name: '泵站检修方案', startTime: '2024-03-23 08:00', endTime: '2024-03-23 18:00', info: '设备维护检修' },
  { name: '水质监测方案', startTime: '2024-03-24 07:30', endTime: '2024-03-24 16:30', info: '各点位水质采样分析' },
  { name: '水位预警预案', startTime: '2024-03-25 10:00', endTime: '2024-03-25 16:00', info: '防汛应急抢险演练' },
  { name: '水闸调度方案', startTime: '2024-03-26 09:00', endTime: '2024-03-26 17:00', info: '水闸联合调度演练' },
  { name: '堤坝巡检方案', startTime: '2024-03-27 08:30', endTime: '2024-03-27 18:30', info: '重点堤段安全巡检' }
])

// 轮播表格配置
const rehearsalConfig = computed(() => ({
  header: ['方案名称', '开始时间', '结束时间', '方案信息'],
  data: rehearsalPlans.value.map(plan => [
    plan.name, 
    plan.startTime, 
    plan.endTime, 
    plan.info
  ]),
  rowNum: 5,
  headerBGC: '#00BAFF',
  oddRowBGC: '#003B51',
  evenRowBGC: '#0A2732',
  textStyle: { color: '#fff', fontSize: 14 },
  align: ['center', 'center', 'center', 'center'],
  columnWidth: [120, 140, 140, 160],
  waitTime: 2000,
  headerHeight: 35,
  carousel: 'single',
  hoverPause: true
}))

// 紧急事件数据
const emergencyEvents = ref([
  {
    id: 1,
    time: '2024-03-20 10:30',
    title: '某区域水位异常',
    status: '去处理',
    level: 'high',
    location: '天津市河西区某街道',
    description: '由于连续降雨，某区域水位持续上升，已超过警戒水位。',
    plan: '防汛应急预案V1.0.pdf',
    source: '水位监测站'
  },
  {
    id: 2,
    time: '2024-03-20 09:15',
    title: '某泵站故障',
    status: '处理中',
    level: 'medium',
    location: '天津市南开区某泵站',
    description: '泵站设备出现异常，需要紧急维修。',
    plan: '泵站故障处理预案V2.0.pdf',
    source: '设备报警系统'
  }
])

// 当前显示的事件
const currentEvent = computed(() => {
  return emergencyEvents.value[currentEventIndex.value] || null
})

// 切换事件详情
const navigateEvent = (direction) => {
  if (direction === 'prev' && currentEventIndex.value > 0) {
    currentEventIndex.value--
  } else if (direction === 'next' && currentEventIndex.value < (emergencyEvents.value?.length || 0) - 1) {
    currentEventIndex.value++
  }
}

// 抢险队伍数据
const rescueTeams = ref([
  { name: '第一抢险队', department: '市水务局', status: '待命', contact: '张组长 022-12345678' },
  { name: '第二抢险队', department: '河西区水务局', status: '待命', contact: '李组长 022-87654321' },
  { name: '应急抢险突击队', department: '南开区水务局', status: '待命', contact: '王队长 022-11112222' },
  { name: '防汛抢险队', department: '市防汛办', status: '待命', contact: '赵组长 022-33334444' }
])

// 应急物资数据
const emergencySupplies = ref([
  { name: '抽水泵', department: '市水务局物资科', contact: '刘科长 022-55556666' },
  { name: '救生衣', department: '市水务局物资科', contact: '刘科长 022-55556666' },
  { name: '沙袋', department: '市防汛办', contact: '钱主任 022-77778888' },
  { name: '应急照明设备', department: '市应急管理局', contact: '孙科长 022-99990000' },
  { name: '便携式发电机', department: '市应急管理局', contact: '孙科长 022-99990000' }
])

const contactCategories = ref([
  {
    title: '相关单位',
    isExpanded: false,
    items: [
      {
        title: '水务局',
        isExpanded: false,
        contacts: [
          { name: '办公室', phone: '022-12345678' },
          { name: '应急科', phone: '022-87654321' }
        ]
      },
      {
        title: '防汛办',
        isExpanded: false,
        contacts: [
          { name: '值班室', phone: '022-11112222' },
          { name: '调度室', phone: '022-33334444' }
        ]
      }
    ]
  },
  {
    title: '社会组织',
    isExpanded: false,
    items: [
      {
        title: '救援队',
        isExpanded: false,
        contacts: [
          { name: '蓝天救援队', phone: '022-55556666' },
          { name: '红十字救援队', phone: '022-77778888' }
        ]
      }
    ]
  },
  {
    title: '生活服务',
    isExpanded: false,
    items: [
      {
        title: '供水公司',
        isExpanded: false,
        contacts: [
          { name: '客服中心', phone: '022-99990000' },
          { name: '维修部', phone: '022-11112222' }
        ]
      }
    ]
  },
  {
    title: '公关部门',
    isExpanded: false,
    items: [
      {
        title: '宣传部',
        isExpanded: false,
        contacts: [
          { name: '新闻科', phone: '022-33334444' },
          { name: '舆情科', phone: '022-55556666' }
        ]
      }
    ]
  },
  {
    title: '消防救援',
    isExpanded: false,
    items: [
      {
        title: '消防大队',
        isExpanded: false,
        contacts: [
          { name: '指挥中心', phone: '119' },
          { name: '值班室', phone: '022-77778888' }
        ]
      }
    ]
  },
  {
    title: '医疗机构',
    isExpanded: false,
    items: [
      {
        title: '医院',
        isExpanded: false,
        contacts: [
          { name: '急诊科', phone: '022-99990000' },
          { name: '救护车', phone: '120' }
        ]
      }
    ]
  },
  {
    title: '交通部门',
    isExpanded: false,
    items: [
      {
        title: '交警大队',
        isExpanded: false,
        contacts: [
          { name: '指挥中心', phone: '022-11112222' },
          { name: '事故科', phone: '022-33334444' }
        ]
      }
    ]
  },
  {
    title: '其他',
    isExpanded: false,
    items: [
      {
        title: '应急物资',
        isExpanded: false,
        contacts: [
          { name: '物资仓库', phone: '022-55556666' },
          { name: '配送中心', phone: '022-77778888' }
        ]
      }
    ]
  }
])

const toggleCategory = (index) => {
  contactCategories.value[index].isExpanded = !contactCategories.value[index].isExpanded
}

const toggleSubCategory = (category, subIndex) => {
  category.items[subIndex].isExpanded = !category.items[subIndex].isExpanded
}

const showEventDetail = (event) => {
  selectedEvent.value = event
  showDialog.value = true
}

const updateEventStatus = (status) => {
  if (selectedEvent.value) {
    const event = emergencyEvents.value.find(e => e.id === selectedEvent.value.id)
    if (event) {
      event.status = status
    }
  }
}

// 预案管理对话框
const showPlanDialog = ref(false)

// 事件处理对话框
const showEventDialog = ref(false)

// 物资调度对话框
const showSupplyDialog = ref(false)

// 队伍调度对话框
const showTeamDialog = ref(false)

// 底部按钮点击事件
const onPlanManage = () => {
  showPlanDialog.value = true
}

const onEventHandle = () => {
  showEventDialog.value = true
}

const onSupplyDispatch = () => {
  showSupplyDialog.value = true
}

const onTeamDispatch = () => {
  showTeamDialog.value = true
}
</script>

<style lang="scss" scoped>
.dispatch-command {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20px;
  box-sizing: border-box;

  .bottom-buttons {
    position: absolute;
    left: 50%;
    bottom: 80px; // 调整位置，避免与底部状态栏重叠
    transform: translateX(-50%);
    z-index: 10;

    .button-group {
      display: flex;
      gap: 20px;
      background: rgba(0, 24, 48, 0.7);
      padding: 10px 20px;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 194, 255, 0.2);
      border: 1px solid rgba(0, 194, 255, 0.3);

      .button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 8px 16px;
        cursor: pointer;
        color: #00c2ff;
        transition: all 0.3s ease;
        border-radius: 4px;

        &:hover {
          background: rgba(0, 194, 255, 0.1);
          transform: translateY(-2px);
        }

        i {
          font-size: 20px;
        }

        span {
          font-size: 14px;
        }
      }
    }
  }

  .map-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    
    .map-container {
      width: 100%;
      height: 100%;
      transform: scale(1.8);
    }
  }

  .left-section {
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
    width: 25%; /* 调整左侧模块宽度为四分之一 */
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
    pointer-events: auto;
    
    .rehearsal-section {
      height: calc(50% - 10px);
      overflow: hidden;
      
      .search-box {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        position: relative;
        padding: 10px 15px 0;

        input {
          width: 100%;
          padding: 10px 35px 10px 15px;
          border: 1px solid rgba(0, 194, 255, 0.3);
          border-radius: 4px;
          background-color: rgba(15, 19, 37, 0.5);
          color: #fff;
          font-size: 14px;
          
          &::placeholder {
            color: rgba(255, 255, 255, 0.5);
          }
          
          &:focus {
            outline: none;
            border-color: #00c2ff;
            box-shadow: 0 0 5px rgba(0, 194, 255, 0.5);
          }
        }

        .search-icon {
          position: absolute;
          right: 25px;
          color: #00c2ff;
          font-size: 16px;
          cursor: pointer;
        }
      }

      .table-container {
        height: calc(100% - 65px);
        overflow: hidden;
        padding: 0 15px;
      }
    }

    .contact-section {
      height: calc(50% - 10px);
      overflow: hidden;
      background-color: rgba(0, 24, 48, 0.7);
      box-shadow: inset 0 0 15px rgba(0, 194, 255, 0.2);
      border-radius: 4px;
      
      .contact-list {
        height: 100%;
        padding: 25px 15px 15px;
        overflow: auto;
        
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 194, 255, 0.3);
          border-radius: 3px;
        }
        
        &::-webkit-scrollbar-track {
          background: rgba(0, 24, 48, 0.3);
          border-radius: 3px;
        }
        
        .contact-category {
          margin-bottom: 10px;
          
          .category-header {
            color: #00c2ff;
            font-size: 16px;
            font-weight: bold;
            padding: 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0,194,255,0.3);
            
            &:hover {
              background-color: rgba(0,194,255,0.1);
            }
          }
        }
      }
    }
  }

  .info-section {
    position: absolute;
    right: 20px;
    top: 20px;
    bottom: 20px;
    width: 33.33%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
    height: calc(100% - 40px);

    .info-card {
      box-sizing: border-box;
      background-color: rgba(0, 24, 48, 0.7);
      box-shadow: inset 0 0 15px rgba(0, 194, 255, 0.2);
      border-radius: 4px;
      position: relative;
      margin-bottom: 10px;
      
      .card-title {
        position: absolute;
        top: -10px;
        left: 20px;
        background: linear-gradient(90deg, #0a2732 0%, #003b51 100%);
        padding: 2px 15px;
        border-radius: 4px;
        color: #00c2ff;
        font-size: 18px;
        font-weight: bold;
        z-index: 1;
        box-shadow: 0 0 10px rgba(0, 194, 255, 0.3);
        border: 1px solid rgba(0, 194, 255, 0.5);
      }
      
      .card-content {
        height: 100%;
        padding: 25px 15px 15px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: auto;
        
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 194, 255, 0.3);
          border-radius: 3px;
        }
        
        &::-webkit-scrollbar-track {
          background: rgba(0, 24, 48, 0.3);
          border-radius: 3px;
        }
      }
      
      &.emergency {
        height: 32%;
      }
      
      &.rescue {
        height: 32%;
      }
      
      &.supplies {
        height: calc(32% - 20px);
        width: 75%;
        margin-left: auto;
        margin-bottom: 0;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }
  
  .emergency-stats {
    padding: 8px;
    background-color: rgba(0, 57, 89, 0.3);
    border-radius: 4px;
    margin-bottom: 10px;
    
    .stat-item {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .stat-icon {
        transform: scale(0.9);
        margin-right: 10px;
      }
      
      .stat-text {
        color: #fff;
        font-size: 16px;
        
        .stat-value {
          color: #d81e06;
          font-size: 22px;
          font-weight: bold;
          margin-left: 5px;
        }
      }
    }
  }
  
  .emergency-detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .detail-container {
      flex: 1;
      background-color: rgba(0, 57, 89, 0.5);
      border: 1px solid rgba(0, 194, 255, 0.3);
      border-radius: 4px;
      padding: 10px;
      margin: 5px;
      box-sizing: border-box;
      min-height: 0;
      
      .event-detail-box {
        height: 100%;
        background-color: rgba(0, 24, 48, 0.6);
        border-radius: 4px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .detail-item {
          display: flex;
          margin-bottom: 6px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .detail-label {
            width: 90px;
            color: #00c2ff;
            font-size: 14px;
            font-weight: bold;
            flex-shrink: 0;
          }
          
          .detail-value {
            flex: 1;
            color: #fff;
            font-size: 14px;
            line-height: 1.2;
            
            &.description {
              max-height: 40px;
              line-height: 1.2;
            }
          }
        }
      }
    }
    
    .event-navigation {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 8px;
      
      .nav-arrow {
        cursor: pointer;
        color: #00c2ff;
        font-size: 16px;
        padding: 3px 8px;
        border-radius: 3px;
        background-color: rgba(0, 57, 89, 0.3);
        transition: all 0.3s ease;
        
        &:hover:not(.disabled) {
          background-color: rgba(0, 57, 89, 0.5);
          transform: scale(1.1);
        }
        
        &.disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
    }
  }
  
  .rescue-table, .supplies-table {
    width: 100%;
    border-collapse: collapse;
    overflow: auto;
    
    th, td {
      padding: 8px 12px;
      text-align: left;
      border-bottom: 1px solid rgba(0, 194, 255, 0.2);
      font-size: 15px;
    }
    
    th {
      background-color: rgba(0, 57, 89, 0.5);
      color: #00c2ff;
      font-weight: bold;
      font-size: 16px;
    }
    
    tr:hover {
      background-color: rgba(0, 194, 255, 0.1);
    }
  }
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  
  &.待命 {
    background-color: rgba(24, 144, 255, 0.2);
    color: #1890ff;
  }
  
  &.出动 {
    background-color: rgba(82, 196, 26, 0.2);
    color: #52c41a;
  }
  
  &.返回 {
    background-color: rgba(250, 173, 20, 0.2);
    color: #faad14;
  }
}
</style> 